<template>
  <div class="tabbar">
    <van-tabbar v-model="currentIndex" active-color="ff9854">
      <template v-for="(item, index) in tabInfoArr">
        <van-tabbar-item :to="item.path">
          <template #icon>
            <img
              :src="getAssetURL(item.src)"
              alt=""
              v-if="currentIndex !== index"
            />
            <img :src="getAssetURL(item.activeSrc)" v-else alt="" />
          </template>
          <span>{{ item.name }}</span>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import { tabInfoArr } from "@/assets/data/tabbar";
import { getAssetURL } from "@/utils/load_assets_img";
import { ref } from "vue";
const currentIndex = ref(0);
</script>

<style lang="less" scoped>
.tabbar {
  img {
    height: 26px;
  }
}
</style>
